<template>
    <div class="container">
        <div class="title">
            <p class="left">销售情况</p>
            <p class="right">目标销售额<span> 96850650.00 </span>元</p>
        </div>
        <div class="number">
            <span v-for="(item, index) in pople" :key="index">{{ item }}</span>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts" name="LeftTop">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const pople = ref('96850650.00元')
const charts = ref()

onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        title: { text: '销售完成率' },
        series: {
            type: 'liquidFill', radius: '80%', data: [0.785, 0.685, 0.585],
            // 背景颜色
            backgroundStyle: { color: 'white' },
            // 外围轮廓
            outline: {
                borderDistance: 0,
                itemStyle: {
                    borderColor: {
                        type: 'linear',
                        x: 0, y: 0, x2: 1, y2: 1,
                        colorStops: [{ offset: 0, color: 'red' }, { offset: 0.5, color: '#D4237A' }, { offset: 1, color: 'orange' }]
                    },
                    borderWidth: 10, shadowBlur: 10, shadowColor: '#D4237A', opacity: 0.85
                }
            },
            // 波纹样式
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{ offset: 0, color: 'red' }, { offset: 0.5, color: '#D4237A' }, { offset: 1, color: 'orange' }]
                },
                shadowBlur: 30, shadowColor: '#999', opacity: 0.85
            },
            // 标签文本
            label: {
                fontSize: 40,
                color: 'black',
                formatter: function (param: { value: number; }) {
                    return (param.value * 100).toFixed(1) + '%';
                }
            }
        }
    })
})
</script>

<style scoped lang="scss">
.title {
    display: flex;
    justify-content: space-between;

    .left {
        font-size: 20px;
        margin-left: 20px;
    }

    .right {
        font-size: 20px;

        span {
            background: linear-gradient(to right, #D4237A, orange);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }
}

.number {
    display: flex;
    margin-top: 20px;

    span {
        flex: 1;
        color: #D4237A;
        height: 100px;
        text-align: center;
        line-height: 100px;
        backdrop-filter: blur(10px);
        border: 1px solid orange;
        box-shadow: 0 5px 5px #D7237B;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
}

.charts {
    margin-top: 20px;
    width: 100%;
    height: 250px;
}
</style>